<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title ></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;}
        img{border:0;}
        .scroll{width:800px;height:180px;}
        /*.scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg) no-repeat;float:left;}*/
        /*.scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg) left no-repeat;float:left;}*/
        .pic{width:480px;height:180px;float:left;}
        .pic ul{display:block;}
        .pic li{float:left;display:inline;width:280px;text-align:center;}
        body {
            margin: 0px;
            font-family: 微软雅黑;
        }

        /*头部样式*/
        #head {
            background-color: white;
            height: 120px;
            position: relative;
        }

        #head a {
            text-decoration: none;
        }

        #head_title {
            font-size: 32px;
            position: absolute;
            margin: 42px 40px;
            font-weight: bold;

        }

        #head_title a {
            color: #076ce0;
        }

        #head_menu {
            font-size: 16px;
            position: absolute;
            right: 103px;
            top: 51px;
        }

        #head_menu a {
            color: black;

        }

        #head_menu > div {
            float: left;
            margin: 0 20px;
        }



        /*选项*/
        #body_menu {
            height: 95px;
            padding: 32px 40px 50px 39px;
        }

        #body_menu > div {
            width: 130px;
            height: 44px;
            text-align: center;
            transition-duration: 0.5s; /*设置动画持续时间*/
        }

        #body_menu_d1 {
            background-color: #076ce0;
        }

        #body_menu_d2 {
            background-color: white;
        }

        #body_menu > div {
            float: left;
            margin-right: 21px;
        }

        #body_menu > div > span {
            line-height: 44px;
            color: white;
        }



        #content_text > div > span > a {
            color: rgb(7, 108, 224);
            font-size: 14px;
            text-decoration: none;
            float: right;
            left: 5px;
        }
        #tail{
            height: 161px;
            background-color: rgba(23,23,23,0.85);
            position: relative;
            color: rgb(153, 153, 153);
        }
        #tail_address{
            position: absolute;
            left: 30px;
        }
        #tail_phone{
            position: absolute;
            left: 1060px;
            top: 70px;
        }
        #tail_img{
            position: absolute;
            left: 1000px;
            top: 70px;
        }
        #tail_phone>p{
            margin: 5px;
        }
        #tail_last{
            height: 21px;
            background-color: rgba(23,23,23,0.9);
            color: rgb(153, 153, 153);
            padding: 30px 30px;

        }
        #tail_last>span>a{
            text-decoration: none;
            color: rgb(153, 153, 153);
            font-size: 14px;
        }
        /*锚点 回到顶部*/
        #back_top{
            width: 42px;
            height: 42px;
            position: fixed;/*固定定位*/
            bottom: 55px;
            right: 65px;
            display: none;
        }

        #containerFormsCenter{
            border-spacing: 0;
            overflow: hidden;
            padding: 0 0 10px 0;
            margin: 0 150px 0 100px;
            height: auto;
        }

        #containerleft_1{
            padding: 25px 0;
            text-align: left;
            font-size: 14px;
            margin: 5px;
        }
        #containerleft_2{
            margin: 5px;
            overflow: hidden;
        }
        #containerright_1{
            padding: 25px 0;
            text-align: left;
            font-size: 14px;
            margin: 5px;
        }
        #containerright_2{
            margin: 5px;
            overflow: hidden;
            font-size: 14px;
            font-family: 微软雅黑;
            color: #999999;
            font-weight: normal;
            min-height: 23px;
            line-height: 1.7;
        }

        #containerleft{
            float: left;
            width: 590px;
            height: 306px;
        }

        #containerright{
            float: left;
            width: 500px;
            height: 316px;
        }

    </style>
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a href="" id="top1"></a>
<div id="bodyApp">
    <div id="head">
        <div id="head_title">
            <a href="./index">{{aboutUs.name}}</a>
        </div>
        <div id="head_menu">
            <div><a href="./index"  style="color: #076ce0" >首页</a></div>
            <div><a href="./breSources">业务资源</a></div>
            <div><a href="./keyServices">特色服务</a></div>
            <div><a href="./newsCenter">新闻中心</a></div>
            <div><a href="./aboutUs">关于我们</a></div>
        </div>
    </div>
<!--    轮播图 start-->
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../front/image/lunbo01.jpg" alt="First slide">
            </div>
            <div class="item">
                <img src="../front/image/lunbo02.jpg" alt="Second slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!--    轮播图 end-->
<!--    正文 start-->

    <div id="containerFormsCenter">
        <div id="containerleft" >
            <div id="containerleft_1">
            <span style="color: #076ce0;padding-top: 12px;"> 公司简介</span>
                <span style="color: #999999;margin:0 0 0 15px">/Company Profile</span>
            </div>
            <div id="containerleft_2">
               <div style="width:200px;height:220px; float: left;margin: 5px 10px 5px 5px">
                   <img src="../front/image/jieshou.jpg"  alt=""></div>
                <div style="width:365px;height:220px; float: left">
                    <span style="text-align: justify;line-height: 2em;color: #999999;font-family: 微软雅黑;font-size: 13px;">
                        XXXX物业管理有限公司成立于2013年10月，注册资金303万元整，并于2014年获得ISO9001:2000换版质量管理体系认证。目前公司物业管理覆盖到以武汉市为中心涉及到写字楼、普通住宅、高档小区、工业园、酒店等。美名物业全力打造武汉市值得信赖的物业管理服务集成商为愿景，我们宗旨是：真诚服务千万家!
                        <br>
公司下设总经理办公室、财务室、采购部、市场部、人事部、操作部等六大部门和众多管理服务中心。
                    </span>
                    <span>
                        <a href="" style="font-size: 13px;color: #076CE0;text-decoration: none;">查看更多>></a>
                    </span>
                </div>
            </div>
        </div>

        <div id="containerright">
            <div id="containerright_1">
                <span style="color: #076ce0;padding-top: 12px;"> 新闻动态</span>
                <span style="color: #999999;margin:0 0 0 15px">/News Information</span>
            </div>
            <div id="containerright_2">
                <ul>
                    <li>
                        <tr>
                            <a href="" style="text-decoration: none">
                                <table width="400px">
                                        <td align="left">小区绊倒摔伤 物业是否担责</td>
                                        <td align="right">2017-10-23</td>
                                </table>
                            </a>
                        </tr>
                        <hr style="border:1px dashed #e5e5e5;margin:10px 0">
                    </li>
                    <li>
                        <tr>
                            <a href="" style="text-decoration: none">
                                <table width="400px">
                                    <td align="left">小区绊倒摔伤 物业是否担责</td>
                                    <td align="right">2017-10-23</td>
                                </table>
                            </a>
                        </tr>
                        <hr style="border:1px dashed #e5e5e5;margin:10px 0">
                    </li>
                    <li>
                        <tr>
                            <a href="" style="text-decoration: none">
                                <table width="400px">
                                    <td align="left">小区绊倒摔伤 物业是否担责</td>
                                    <td align="right">2017-10-23</td>
                                </table>
                            </a>
                        </tr>
                        <hr style="border:1px dashed #e5e5e5;margin:10px 0">
                    </li>
                    <li>
                        <tr>
                            <a href="" style="text-decoration: none">
                                <table width="400px">
                                    <td align="left">小区绊倒摔伤 物业是否担责</td>
                                    <td align="right">2017-10-23</td>
                                </table>
                            </a>
                        </tr>
                        <hr style="border:1px dashed #e5e5e5;margin:10px 0">
                    </li>
                    <li>
                        <tr>
                            <a href="" style="text-decoration: none">
                                <table width="400px">
                                    <td align="left">小区绊倒摔伤 物业是否担责</td>
                                    <td align="right">2017-10-23</td>
                                </table>
                            </a>
                        </tr>
                        <hr style="border:1px dashed #e5e5e5;margin:10px 0">
                    </li>
                </ul>


            </div>

        </div>
        <div style="width: 1000px">
            <div style="margin: 80px 0 30px 0px">
                <span style="color: #076ce0;padding-top: 14px;"> 服务案例</span>
                <span style="color: #999999;margin:0 0 0 15px">/Successful Case</span>
            </div>
            <div >
                <div class="scroll">
                    <!--        <div class="scroll_left" id="LeftArr"></div>-->
                    <div class="pic" id="scrollPic">
                        <ul>
                            <li><img src="../front/image/gd01.jpg" width="240" height="180" alt="" /></li>
                            <li><img src="../front/image/gd02.jpg" width="240" height="180" alt="" /></li>
                            <li><img src="../front/image/gd03.jpg" width="240" height="180" alt="" /></li>
                            <li><img src="../front/image/gd04.jpg" width="240" height="180" alt="" /></li>
                            <li><img src="../front/image/gd05.jpg" width="240" height="180" alt="" /></li>
                        </ul>
                    </div>
                    <!--        <div class="scroll_right" id="RightArr"></div>-->
                </div>
            </div>

        </div>

    </div>

    <!--    正文 end-->


    <div id="tail">
        <div id="tail_address">
            <p style="font-size: 26px;margin-bottom: 15px">Property Management</p>
            <p style="font-size: 13px">联系邮箱：{{aboutUs.email}}</p>
            <p style="font-size: 13px">联系地址：{{aboutUs.address}}</p>
        </div>
        <div id="tail_img">
            <img src="../front/image/aboutUs/03.png" alt="" height="45">
        </div>
        <div id="tail_phone">
            <p style="font-size: 14px">服务热线</p>
            <p style="font-size: 18px" v-text="aboutUs.telephone">000-000-0000</p>
        </div>
    </div>
    <div id="tail_last">
        <span><a href="/admin">登录管理</a></span>
    </div>
    <div id="back_top">
        <img src="../front/image/aboutUs/04.png" alt="">
    </div>
</div>
</body>

<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入JQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="../front/js/scrollPic.js"></script>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    let v = new Vue({
        el: "#bodyApp",
        data: {
            aboutUs: {}
        },
        methods: {
            info: function () {
                axios({
                    url: "/f-infocompany/aboutUs",
                    method: "get"
                }).then(function (response) {
                    v.aboutUs = response.data;
                    console.log(v.aboutUs);
                })
            }
        },
        created: function () {
            this.info();
        }
    })


    /*回到顶部*/
    $(function(){
        $(window).scroll(function(){  //只要窗口滚动,就触发下面代码
            var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
            if( scrollt >50 ){  //判断滚动后高度超过200px,就显示
                $("#back_top").slideDown(500); //淡入
            }else{
                $("#back_top").stop().slideUp(500); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
            }
        });
        $("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({scrollTop:"0px"},200);
        });
    });

    window.onload = function(){
        scrollPic();
    }
    function scrollPic() {
        var scrollPic = new ScrollPic();
        scrollPic.scrollContId  = "scrollPic"; //内容容器ID
        scrollPic.arrLeftId   = "LeftArr";//左箭头ID
        scrollPic.arrRightId   = "RightArr"; //右箭头ID
        scrollPic.frameWidth   = 1200;//显示框宽度
        scrollPic.pageWidth   = 1; //翻页宽度
        scrollPic.speed     = 1; //移动速度(单位毫秒，越小越快)
        scrollPic.space     = 2 //每次移动像素(单位px，越大越快)
        scrollPic.autoPlay    = true; //自动播放
        scrollPic.autoPlayTime  = 0.1; //自动播放间隔时间(秒)
        scrollPic.initialize(); //初始化
    }
</script>
</html>